<template>
  <div>
    <!-- 报价单切换按钮 -->
    <button id="quoteToggleBtn" v-if="!isQuoteVisible"
      class="fixed top-0 right-0 bg-accent text-white py-2 px-4 z-50 shadow-lg transition-transform duration-300 flex items-center justify-center font-medium text-lg" style="border-radius: 30px 0 0 30px ;"
      @click="floatQuote">
      <i class="fa fa-tag mr-2"></i>
      <span style="font-size:15x;" v-if="isBuy">报价单</span>
      <span style="font-size:15x;" v-else>推荐</span>
    </button>

    <!-- 主内容区域 -->
    <main>

      <div v-if="isQuoteVisible"
        class="container float-in z-50 w-[90%] left-[5%] bg-white rounded-2xl shadow-lg overflow-hidden" :class
        ="{ 'fixedDiv':isFloating }">
        <!-- 关闭按钮 -->
        <div class="flex items-center justify-between p-3 border-b border-gray-100 bg-light">
          <h2 class="text-2xl font-bold mb-2 text-accent" ><span v-if="product.name">{{ product.name }}</span></h2>
          <button v-if="isQuoteVisible"
            class="top-3 right-3 bg-white/80 text-accent w-8 h-8 rounded-full flex items-center justify-center shadow-md z-10"
            @click="closeFloatingQuote">
            <i class="fa fa-times"></i>
          </button>
        </div>

        <div :style="isFloating?'overflow-y: auto;max-height: 60vh;':''" >

        <!-- 产品信息卡片 -->
        <div v-if="product.name" class="bg-white rounded-2xl shadow-soft mb-6 overflow-hidden">
          <div class="relative h-100">
            <img :src="product.image" :alt="product.name" class="w-full h-full object-cover">
            <div
              class="absolute top-4 right-4 bg-red-500 text-white text-sm px-3 py-1 rounded-full font-medium countdown-pulse">
              限时抢购
            </div>
          </div>
          <div class="p-6">
            <p class="text-gray-600 mb-4">{{ product.description }}</p>

            <!-- 价格和限时优惠区域 -->
            <div class="mb-6">
              <div class="flex items-center justify-between mb-3">
                <div>
                  <!-- <span class="text-gray-400 text-base line-through">¥{{ product.originalPrice.toLocaleString() -->
                  <!-- }}</span> -->
                  <span class="text-3xl font-bold text-red-500 ml-2">¥{{ product.currentPrice.toLocaleString()
                  }}</span>
                </div>
              </div>

              <!-- 紧迫感提示 -->
              <div class="flex items-center text-red-500 font-medium mb-3">
                <i class="fa fa-exclamation-circle mr-2"></i>
                <span>仅剩最后{{ product.stock }}套！抢完即止，恢复原价！</span>
              </div>

              <!-- 大尺寸倒计时组件 -->
              <div class="bg-light p-4 rounded-xl border border-primary/30">
                <div class="flex items-center text-sm text-gray-700 mb-2">
                  <i class="fa fa-clock-o mr-1 text-red-500"></i>
                  <span class="font-medium">限时优惠结束倒计时：</span>
                </div>
                <div class="flex gap-3 justify-center">
                  <div
                    class="bg-white rounded-lg w-20 h-20 flex flex-col items-center justify-center shadow-md border border-red-100 countdown-pulse">
                    <span class="text-red-500 font-bold text-3xl">{{ countdown.days }}</span>
                    <span class="text-xs text-gray-500">天</span>
                  </div>
                  <span class="flex items-center text-red-500 font-bold text-xl">:</span>
                  <div
                    class="bg-white rounded-lg w-20 h-20 flex flex-col items-center justify-center shadow-md border border-red-100 countdown-pulse">
                    <span class="text-red-500 font-bold text-3xl">{{ countdown.hours }}</span>
                    <span class="text-xs text-gray-500">时</span>
                  </div>
                  <span class="flex items-center text-red-500 font-bold text-xl">:</span>
                  <div
                    class="bg-white rounded-lg w-20 h-20 flex flex-col items-center justify-center shadow-md border border-red-100 countdown-pulse">
                    <span class="text-red-500 font-bold text-3xl">{{ countdown.minutes }}</span>
                    <span class="text-xs text-gray-500">分</span>
                  </div>
                  <span class="flex items-center text-red-500 font-bold text-xl">:</span>
                  <div
                    class="bg-white rounded-lg w-20 h-20 flex flex-col items-center justify-center shadow-md border border-red-100 countdown-pulse">
                    <span class="text-red-500 font-bold text-3xl">{{ countdown.seconds }}</span>
                    <span class="text-xs text-gray-500">秒</span>
                  </div>
                </div>
              </div>

              <!-- 地区限制提示 -->
              <div class="flex items-center text-sm text-gray-600 mt-3">
                <i class="fa fa-map-marker mr-1 text-secondary"></i>
                <span>当前地区：<span class="text-accent font-medium">{{ preferredArea }}</span></span>
                <span class="mx-1">|</span>
                <span>此优惠仅限当前地区用户</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 报价单容器 -->
        <div id="quoteContainer"
          class="bg-white rounded-2xl shadow-soft mb-6 overflow-hidden transition-all duration-500 z-20 relative"
          ref="quoteContainer">
          <div class="p-5 border-b border-gray-100 bg-light">
            <h3 class="font-bold text-xl flex items-center text-accent">
              <i class="fa fa-list-alt mr-2"></i> 报价明细
            </h3>
          </div>

          <!-- 报价单内容 -->
          <div id="quoteContent" class="p-5 space-y-6 transition-all duration-500" :style="{
            overflow: isVisible ? 'visible' : 'hidden',
          }">
            <!-- 产品明细 -->
            <div class="space-y-4">
              <div v-for="item in productItems" :key="item.id"
                class="flex items-center p-3 rounded-lg hover:bg-light transition-colors">
                <img :src="item.image" :alt="item.name" class="w-16 h-16 object-cover rounded-lg mr-4">
                <div class="flex-1">
                  <p class="font-medium">{{ item.name }}</p>
                  <p class="text-xs text-gray-500">{{ item.specs }}</p>
                </div>
                <p class="font-medium text-accent">¥{{ item.price }}</p>
              </div>
            </div>

            <!-- 费用汇总 -->
            <div class="space-y-3 pt-3 border-t border-gray-100" v-if="isBuy">
              <div class="flex justify-between">
                <span class="text-gray-600">单品总价</span>
                <span>¥{{ calculateTotalPrice() }}</span>
              </div>
              <div v-if="product.name" class="flex justify-between">
                <span class="text-gray-600">套装优惠</span>
                <span class="text-red-500 font-medium">-¥{{ calculateDiscount() }}</span>
              </div>
              <div class="flex justify-between">
                <span class="text-gray-600">运费</span>
                <span class="text-green-600">免费</span>
              </div>
              <div v-if="product.name" class="flex justify-between font-bold pt-3 border-t border-gray-200">
                <span class="text-lg">套装总价</span>
                <span class="text-2xl text-red-500">¥{{ product.currentPrice }}</span>
              </div>
            </div>

            <!-- 额外福利 -->
            <div class="bg-light p-4 rounded-xl border border-primary/30" v-if="product.gifts && product.gifts.length" >
              <h4 class="font-medium mb-3 text-accent flex items-center">
                <i class="fa fa-gift mr-2"></i> 购买即赠
              </h4>
              <div class="flex flex-wrap gap-2">
                <span v-for="(gift, index) in product.gifts" :key="index"
                  class="bg-white text-sm px-3 py-1 rounded-full shadow-sm border border-primary/20">
                  {{ gift }}
                </span>
              </div>
            </div>
          </div>

          <!-- 报价单底部按钮 -->
          <div class="p-5 bg-light border-t border-gray-100" v-if="isBuy">
            <button
              class="w-full bg-red-500 hover:bg-red-600 text-white py-4 rounded-xl transition-colors flex items-center justify-center font-medium text-lg shadow-md" @click="showResult">
              <i class="fa fa-shopping-bag mr-2"></i> 确认订单
            </button>
            <div class="flex justify-center gap-6 mt-4">
              <button class="text-gray-500 hover:text-accent transition-colors flex items-center">
                <i class="fa fa-heart-o mr-1"></i> 收藏
              </button>
              <button class="text-gray-500 hover:text-accent transition-colors flex items-center">
                <i class="fa fa-share-alt mr-1"></i> 分享
              </button>
              <button class="text-gray-500 hover:text-accent transition-colors flex items-center">
                <i class="fa fa-comments-o mr-1"></i> 咨询客服
              </button>
            </div>
          </div>
        </div>
      </div>
        </div>


    </main>

  </div>
</template>

<script>
export default {
  name: 'BeautyProductQuote',
  props: {
    // 报价单是否可见？
    isQuoteVisible: {
      type: Boolean,
      default: true
    },
    // 报价单是否悬浮显示？
    isFloating: {
      type: Boolean,
      default: true
    },
    isBuy: {
      type: Boolean,
      default: true
    },
    // 套装基本信息
    product: {
      type: Object,
      required: true,
      default: () => ({
        name: '',
        description: '',
        image: '',
        originalPrice: 0,
        currentPrice: 0,
        stock: 0,
        gifts: []
      })
    },
    // 优惠地区
    preferredArea: {
      type: String,
      default: '山西省'
    },
    // 倒计时时间（天/时/分/秒）
    countdownTime: {
      type: Object,
      default: () => ({
        days: 2,
        hours: 8,
        minutes: 45,
        seconds: 33
      })
    },
    // 产品列表
    productItems: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  data() {
    return {
      // 倒计时状态
      countdown: {
        days: '00',
        hours: '00',
        minutes: '00',
        seconds: '00'
      },
      // 报价单状态
      isVisible: true,
      quoteOriginalHeight: 0,
      scrollPosition: 0,
      countdownInterval: null
    }
  },
  methods: {
    // 格式化日期
    formatDate(date) {
      const year = date.getFullYear()
      const month = (date.getMonth() + 1).toString().padStart(2, '0')
      const day = date.getDate().toString().padStart(2, '0')
      return `${year}年${month}月${day}日`
    },

    // 计算单品总价
    calculateTotalPrice() {
      return this.productItems.reduce((total, item) => total + item.price, 0)
    },

    // 计算优惠金额
    calculateDiscount() {
      return this.calculateTotalPrice() - this.product.currentPrice
    },

    // 显示浮动报价单
    floatQuote() {
      this.isQuoteVisible = !this.isQuoteVisible
    },

    // 关闭浮动报价单
    closeFloatingQuote() {
      this.isQuoteVisible = false
    },
    // 启动倒计时
    startCountdown() {
      // 初始化倒计时
      this.countdown = {
        days: this.countdownTime.days.toString().padStart(2, '0'),
        hours: this.countdownTime.hours.toString().padStart(2, '0'),
        minutes: this.countdownTime.minutes.toString().padStart(2, '0'),
        seconds: this.countdownTime.seconds.toString().padStart(2, '0')
      }

      // 每秒更新倒计时
      this.countdownInterval = setInterval(() => {
        let { days, hours, minutes, seconds } = this.countdown

        // 转换为数字进行计算
        let totalSeconds =
          parseInt(days) * 86400 +
          parseInt(hours) * 3600 +
          parseInt(minutes) * 60 +
          parseInt(seconds)

        if (totalSeconds <= 0) {
          clearInterval(this.countdownInterval)
          return
        }

        // 递减一秒
        totalSeconds--

        // 转换回天时分秒
        days = Math.floor(totalSeconds / 86400).toString().padStart(2, '0')
        totalSeconds %= 86400

        hours = Math.floor(totalSeconds / 3600).toString().padStart(2, '0')
        totalSeconds %= 3600

        minutes = Math.floor(totalSeconds / 60).toString().padStart(2, '0')
        seconds = (totalSeconds % 60).toString().padStart(2, '0')

        // 更新倒计时
        this.countdown = { days, hours, minutes, seconds }
      }, 1000)
    },
    showResult() {
        this.$message.warning(' 请联系销售人员咨询购买产品 ~ ')

    },
  },
  mounted() {
    // 获取报价单初始高度
    this.$nextTick(() => {
      this.quoteOriginalHeight = this.$refs.quoteContainer.offsetHeight
    })

    // 监听滚动事件
    window.addEventListener('scroll', this.handleScroll)

    // 启动倒计时
    this.startCountdown()
  },
  beforeDestroy() {
    // 清理事件和定时器
    window.removeEventListener('scroll', this.handleScroll)
    if (this.countdownInterval) {
      clearInterval(this.countdownInterval)
    }
  }
}
</script>

<style scoped>
.container {

}
.fixedDiv{
  position: fixed;
  top: 10px;
  left: 0;
  width: 80%;
  max-width: 600px;
}
/* 自定义工具类 */
@layer utilities {
  .content-auto {
    content-visibility: auto;
  }

  .shadow-soft {
    box-shadow: 0 4px 20px rgba(216, 92, 138, 0.08);
  }

  .countdown-pulse {
    animation: pulse 1.5s infinite;
  }

  @keyframes pulse {
    0% {
      transform: scale(1);
    }

    50% {
      transform: scale(1.05);
    }

    100% {
      transform: scale(1);
    }
  }

  .float-in {
    animation: floatIn 0.5s ease-out forwards;
  }

  @keyframes floatIn {
    from {
      opacity: 0;
      transform: translateY(20px) scale(0.95);
    }

    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
}

/* 引入Tailwind颜色配置 */
:root {
  --primary: #F8C3CD;
  --secondary: #E68FAC;
  --accent: #D85C8A;
  --light: #FFF5F8;
  --dark: #5A3D47;
}

#quoteToggleBtn {
  background: #D85C8A;
}
</style>